<template>
    <div class="ele-body">
        <el-card shadow="never">
            <!-- 搜索表单 -->
            <account-search @search="reload"/>
            <el-card shadow="never" body-style="padding: 15px 0 25px 0;">
                <el-row :gutter="20" style="margin-bottom: 20px">
                    <el-col :md="24" :sm="12" :xs="24">
                        <el-alert type="info" :closable="false" class="ele-alert-border">
              <span class="text-color">
                累计充值点数：<span class="text-blue">{{ recharge }}</span>
              </span>
                            <span class="text-color">
                形象扣点数：<span class="text-blue">{{ avatarPoint }}</span>
              </span>
                            <span class="text-color">
                形象次数：<span class="text-blue">{{ avatarCountUsed }}</span> /
                {{ avatarCount }}
              </span>
                            <span class="text-color">
                声音扣点数：<span class="text-blue">{{ voicePoint }}</span>
              </span>
                            <span class="text-color">
                声音次数：<span class="text-blue">{{ voiceCountUsed }}</span> /
                {{ voiceCount }}
              </span>
                            <span class="text-color">
                视频剪辑时长：<span class="text-blue">{{
                  videoCountUsed
                }}</span>
                / {{ videoCount }}
              </span>
                        </el-alert>
                    </el-col>
                </el-row>
            </el-card>
            <!-- 数据表格 -->
            <ele-pro-table
                    ref="table"
                    :columns="columns"
                    :datasource="datasource"
                    :selection.sync="selection"
                    :toolbar="false"
            >
                <!-- 状态列 -->
                <template v-slot:is_freeze="{ row }">
                    <el-switch
                            :active-value="2"
                            :inactive-value="1"
                            v-model="row.is_freeze"
                            @change="editStatus(row)"
                    />
                </template>

                <template v-slot:name="{ row }">
                    <div v-if="row.info">
                        <div class="ele-cell" v-if="row.info">
                            <el-avatar
                                    v-if="row.info && row.info.avatar"
                                    :src="row.info.avatar"
                                    shape="square"
                                    :size="40"
                            />
                            <div class="ele-cell-content">
                                <div class="ele-cell-title"
                                >{{ row.name }} <span>{{ row.telphone }}</span></div
                                >
                                <div
                                        class="ele-cell-desc text-blue"
                                        v-if="row.info && row.info.type == 1"
                                >{{ row.info.name }} {{ row.info.contact_phone }}
                                </div
                                >
                                <div
                                        class="ele-cell-desc text-blue"
                                        v-if="row.info && row.info.type == 2"
                                >{{ row.info.contact_name }} {{ row.info.contact_phone }}
                                </div
                                >
                            </div>
                        </div>
                        <div
                                class="info-desc"
                                v-if="arrayIncludesValue(row.check_type, '1')"
                        >
                            IP:{{ row.white_list }}
                        </div>
                        <div
                                class="info-desc"
                                v-if="arrayIncludesValue(row.check_type, '2')"
                        >
                            域名:{{ row.domain }}
                        </div>
                        <div class="info-desc" v-if="row.info && row.info.type == 1">
                            身份证号:{{ row.info.id_card_no }}
                        </div>
                        <div class="info-desc" v-if="row.info && row.info.type == 2">
                            营业执照:{{ row.info.business_no }}
                        </div>
                    </div>

                    <div v-else>
                        <div class="ele-cell">
                            <div class="ele-cell-content">
                                <div class="ele-cell-title"
                                >{{ row.name }} <span>{{ row.telphone }}</span></div
                                >
                                <div class="ele-cell-desc">{{ row.telphone }}</div>
                            </div>
                        </div>
                        <div
                                class="info-desc"
                                v-if="arrayIncludesValue(row.check_type, '1')"
                        >
                            IP:{{ row.white_list }}
                        </div>
                        <div
                                class="info-desc"
                                v-if="arrayIncludesValue(row.check_type, '2')"
                        >
                            域名:{{ row.domain }}
                        </div>
                    </div>
                </template>

                <template v-slot:type="{ row }">
                    <div v-if="row.package">
                        <div>
                            <span class="package-name"> {{ row.package.name }}</span>
                            <span class="package-money"> ¥{{ row.package.money }}</span>
                            <el-tag
                                    type="warning"
                                    effect="light"
                                    size="small"
                                    v-if="row.package.type == 1"
                            >{{ row.package.day }} 天
                            </el-tag
                            >
                        </div>

                        <div v-if="row.package.type == 1">
                            形象克隆 {{ row.avatar_twin_used }} /
                            {{ row.is_infinite == 1 ? '无限' : row.avatar_twin_count }}
                            （次）
                        </div
                        >
                        <div v-if="row.package.type == 1">
                            声音克隆 {{ row.voice_twin_used }} /
                            {{ row.is_infinite == 1 ? '无限' : row.voice_twin_count }}
                            （次）
                        </div
                        >
                        <div v-if="row.package.type == 1">
                            视频剪辑 {{ row.video_clip_used }} /
                            {{ row.is_infinite == 1 ? '无限' : row.video_clip_count }}
                            （秒）
                        </div
                        >
                        <div v-if="row.package.type == 2">
                            {{ row.package.point }} （点）
                        </div
                        >
                    </div>
                    <div v-else>
                        <div>
                            形象克隆 {{ row.avatar_twin_used }} /
                            {{ row.avatar_twin_count }} （次）
                        </div
                        >
                        <div>
                            声音克隆 {{ row.voice_twin_used }} /
                            {{ row.voice_twin_count }} （次）
                        </div
                        >
                        <div>
                            视频剪辑 {{ row.video_clip_used }} /
                            {{ row.video_clip_count }} （秒）
                        </div
                        >
                    </div>
                </template>

                <template v-slot:is_status="{ row }">
                    <el-tag v-if="row.is_status == 0" type="primary" effect="light"
                    >已注册
                    </el-tag
                    >
                    <el-tag v-if="row.is_status == 1" type="danger" effect="light"
                    >待审核
                    </el-tag
                    >
                    <el-tag v-if="row.is_status == 2" type="success" effect="light"
                    >已开通
                    </el-tag
                    >
                    <el-tag v-if="row.is_status == 3" type="warning" effect="light"
                    >已拒绝
                    </el-tag
                    >
                </template>

                <template v-slot:info_type="{ row }">
                    <el-tag
                            v-if="row.info && row.info.type == 1"
                            type="success"
                            effect="light"
                    >个人资质
                    </el-tag
                    >
                    <el-tag
                            v-if="row.info && row.info.type == 2"
                            type="primary"
                            effect="light"
                    >企业资质
                    </el-tag
                    >
                    <span v-if="!row.info">--</span>
                </template>

                <template v-slot:balance="{ row }">
                    <span v-if="row.type == 2">{{ row.balance }}</span>
                    <span v-else>--</span>
                </template>

                <template v-slot:maturity_time="{ row }">
                    <span v-if="row.type == 1">{{ row.maturity_time }}</span>
                    <span v-else>--</span>
                </template>

                <!-- 操作列 -->
                <template v-slot:action="{ row }">
                    <el-link
                            type="primary"
                            v-if="row.is_status == 1"
                            :underline="false"
                            icon="el-icon-circle-check"
                            @click="openCheck(row)"
                    >
                        审核
                    </el-link>

                    <el-link
                            v-if="row.type == 2"
                            type="success"
                            :underline="false"
                            icon="el-icon-_lamp"
                            @click="openBalance(row)"
                    >
                        点数
                    </el-link>

                    <el-link
                            type="danger"
                            :underline="false"
                            icon="el-icon-_lamp"
                            @click="openIndependence(row)"
                    >
                        独立账号
                    </el-link>

                    <el-dropdown @command="onDropClick">
                        <el-link type="danger" :underline="false" icon="el-icon-key">
                            重置
                        </el-link>
                        <template v-slot:dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                        :command="beforeHandleCommand(row, row, 'password')"
                                >重置密码
                                </el-dropdown-item
                                >
                                <el-dropdown-item
                                        :command="beforeHandleCommand(row, row, 'appsecret')"
                                >重置秘钥
                                </el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <el-link
                            type="info"
                            :underline="false"
                            icon="el-icon-edit"
                            @click="openEdit(row)"
                    >
                        修改
                    </el-link>

                    <el-link
                            type="success"
                            :underline="false"
                            icon="el-icon-_user-group"
                            @click="openOperationUser(row)"
                    >
                        运营用户
                    </el-link>

                    <el-link
                            type="primary"
                            :underline="false"
                            icon="el-icon-_user-group"
                            @click="agentCk(row)"
                    >
                        代理用户
                    </el-link>
                </template>
            </ele-pro-table>
        </el-card>
        <!-- 编辑弹窗 -->
        <account-edit :visible.sync="showEdit" :data="current" @done="reload"/>
        <check :visible.sync="showCheck" :data="current" @done="reload"/>

        <ele-modal
                position="top"
                width="80%"
                :close-on-click-modal="false"
                custom-class="ele-dialog-form"
                :title="userName + '点数'"
                :visible.sync="showBalance"
        >
            <account-log :data="current" :uid="id" @done="reload"/>
        </ele-modal>

        <ele-modal
                position="top"
                width="80%"
                :close-on-click-modal="false"
                custom-class="ele-dialog-form"
                :title="userName "
                :visible.sync="showIndependence"
        >
            <account-independence :data="current" :uid="id" @done="reload"/>
        </ele-modal>

        <ele-modal

                width="80%"
                :close-on-click-modal="false"
                custom-class="ele-dialog-form"
                :title="userName + '运营用户'"
                :visible.sync="operationUser"
        >
            <operationUser :data="current" :uid="id" @done="reload"/>

        </ele-modal>


        <agent :visible.sync="agentBol" :data="current" :uid="id" @done="reload"/>

        <!--
            <ele-modal

              width="80%"
              :close-on-click-modal="false"
              custom-class="ele-dialog-form"
              :title="userName + '代理用户'"
              :visible.sync="agentBol"
            >
+

            </ele-modal> -->
    </div>
</template>

<script>
    import AccountSearch from './components/account-search';
    import AccountEdit from './components/account-edit';
    import AccountLog from './components/account-log';
    import OperationUser from './components/operationUser';
    import  accountIndependence from './components/account-independence';
    import Agent from './components/agent';
    import Check from './components/check';
    import {
        list,
        remove,
        modify,
        resetPassword,
        resetKey,
        statis,

    } from '@/api/account/list';

    export default {
        name: 'Account',
        components: {
            AccountSearch,
            AccountEdit,
            AccountLog,
            Check,
            OperationUser,
            Agent,
            accountIndependence
        },
        data() {
            return {
                // 表格列配置
                columns: [
                    {
                        columnKey: 'index',
                        type: 'index',
                        width: 45,
                        align: 'center',
                        showOverflowTooltip: true,
                        fixed: 'left'
                    },
                    {
                        prop: 'name',
                        label: '信息资料',
                        showOverflowTooltip: true,
                        minWidth: 180,
                        slot: 'name'
                    },
                    {
                        prop: 'is_status',
                        label: '审核状态',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'is_status'
                    },

                    {
                        prop: 'balance',
                        label: '点数',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'balance'
                    },
                    {
                        prop: 'type',
                        label: '套餐种类',
                        showOverflowTooltip: true,
                        minWidth: 180,
                        slot: 'type'
                    },
                    {
                        prop: 'info_type',
                        label: '申请类型',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'info_type'
                    },

                    {
                        prop: 'is_freeze',
                        label: '冻结状态',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'is_freeze'
                    },
                    {
                        prop: 'maturity_time',
                        label: '到期时间',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'maturity_time'
                    },
                    {
                        prop: 'remark',
                        label: '备注',
                        align: 'center',
                        showOverflowTooltip: true,
                        minWidth: 110
                    },
                    {
                        columnKey: 'action',
                        label: '操作',
                        width: 400,
                        align: 'center',
                        resizable: false,
                        slot: 'action',
                        hideInSetting: true,
                        showOverflowTooltip: true
                    }
                ],
                // 表格选中数据
                selection: [],
                // 当前编辑数据
                current: null,
                // 是否显示编辑弹窗
                showEdit: false,
                // 是否显示审核弹窗
                showCheck: false,
                // 是否显示积分弹窗
                showBalance: false,
                operationUser: false,
                agentBol: false,
                showIndependence:false,
                //弹框名称
                id: 0,
                userName: '',
                recharge: 0,
                avatarPoint: 0,
                avatarCount: 0,
                avatarCountUsed: 0,
                voicePoint: 0,
                voiceCount: 0,
                voiceCountUsed: 0,
                videoCount: 0,
                videoCountUsed: 0,
                oss_url: '',
                is_independence: 0,
                is_on: '',
                oss_bucket: '',
                oss_accessId: '',
                oss_accessSecret: '',
                oss_endpoint: ''
            };
        },
        methods: {
            arrayIncludesValue(array, value) {
                return array.includes(value);
            },
            beforeHandleCommand(index, row, command) {
                return {
                    index: index,
                    row: row,
                    command: command
                };
            },
            /* 下拉菜单点击事件 */
            onDropClick(command) {
                if (command.command === 'password') {
                    this.resetPsw(command.row);
                } else if (command.command === 'appsecret') {
                    this.resetKey(command.row);
                }
            },

            /* 表格数据源 */
            datasource({page, limit, where, order}) {
                return list({...where, ...order, page, limit});
            },
            /* 刷新表格 */
            reload(where) {
                this.$refs.table.reload({page: 1, where: where});
            },
            /* 打开编辑弹窗 */
            openEdit(row) {
                this.current = row;
                this.showEdit = true;
            },
            /* 打开编辑弹窗 */
            openCheck(row) {
                this.id = row.id;
                this.current = row;
                this.showCheck = true;
            },
            /* 打开编辑弹窗 */
            openBalance(row) {
                this.id = row.id;
                this.current = row;
                this.showBalance = true;
                this.userName = row.telphone;
            },
            /* 打开编辑弹窗 */
            openIndependence(row) {
                this.id = row.id;
                this.current = row;
                this.showIndependence = true;
                this.userName = row.telphone;
            },
            openOperationUser(row) {
                this.id = row.id;
                this.current = row;
                this.operationUser = true;
                this.userName = row.telphone;
            },
            agentCk(row) {
                console.log(row)
                this.id = row.id;
                this.current = row;
                this.agentBol = true;
                this.userName = row.telphone;
            },

            /* 删除 */
            remove(row) {
                const loading = this.$loading({lock: true});
                remove(row.id)
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                        this.reload();
                    })
                    .catch((e) => {
                        loading.close();
                        this.$message.error(e.message);
                    });
            },

            /* 重置密码 */
            resetPsw(row) {
                this.$confirm('确定要重置此账号的密码为"123456"吗?', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        const loading = this.$loading({lock: true});
                        resetPassword(row.id)
                            .then((msg) => {
                                loading.close();
                                this.$message.success(msg);
                            })
                            .catch((e) => {
                                loading.close();
                                this.$message.error(e.message);
                            });
                    })
                    .catch(() => {
                    });
            },
            /* 重置秘钥 */
            resetKey(row) {
                this.$confirm('确定要重置此账号的秘钥吗?', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        const loading = this.$loading({lock: true});
                        resetKey(row.id)
                            .then((msg) => {
                                loading.close();
                                this.$message.success(msg);
                            })
                            .catch((e) => {
                                loading.close();
                                this.$message.error(e.message);
                            });
                    })
                    .catch(() => {
                    });
            },
            /* 批量删除 */
            removeBatch() {
                if (!this.selection.length) {
                    this.$message.error('请至少选择一条数据');
                    return;
                }
                this.$confirm('确定要删除选中的数据吗?', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        const loading = this.$loading({lock: true});
                        remove(this.selection.map((d) => d.id))
                            .then((msg) => {
                                loading.close();
                                this.$message.success(msg);
                                this.reload();
                            })
                            .catch((e) => {
                                loading.close();
                                this.$message.error(e.message);
                            });
                    })
                    .catch(() => {
                    });
            },

            /* 更改状态 */
            editStatus(row) {
                const loading = this.$loading({lock: true});
                modify({id: row.id, field: 'is_freeze', value: row.is_freeze})
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                    })
                    .catch((e) => {
                        loading.close();
                        row.is_freeze = row.is_freeze == 1 ? 2 : 1;
                        this.$message.error(e.message);
                    });
            },
            dataStatis() {
                statis()
                    .then((data) => {
                        if (data != null) {
                            this.recharge = data.recharge;
                            this.avatarPoint = data.avatarPoint;
                            this.avatarCount = data.avatarCount;
                            this.avatarCountUsed = data.avatarCountUsed;
                            this.voicePoint = data.voicePoint;
                            this.voiceCount = data.voiceCount;
                            this.voiceCountUsed = data.voiceCountUsed;
                            this.videoCount = data.videoCount;
                            this.videoCountUsed = data.videoCountUsed;
                            this.oss_url = data.oss_url;
                            this.is_independence = data.is_independence;
                            this.is_on = data.is_on;
                            this.oss_bucket = data.oss_bucket;
                            this.oss_accessId = data.oss_accessId;
                            this.oss_accessSecret = data.oss_accessSecret;
                            this.oss_endpoint = data.oss_endpoint;
                        }
                    })
                    .catch((e) => {
                        this.$message.error(e.message);
                    });
            }
        },
        mounted() {
            this.dataStatis();
        }
    };
</script>


<style lang="less" scoped>

    .text-blue {
        color: #1890ff;
    }

    .text-color {
        color: #000;
        font-size: 16px;
        width: 245px;
        display: inline-block;
    }

    .info-desc {
        color: #999999;
        font-size: 14px;
    }

    .package-name {
        color: #1367de;
        font-size: 14px;
        margin-right: 5px;
    }

    .package-money {
        color: #ff0000;
        font-size: 18px;
        margin-right: 5px;
    }

    .drag {
        background: #000 !important;
        background-image: linear-gradient(#333, #999) !important;
    }

    .ele-cell-content {
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
